<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let与var的区别</title>
    <script>
        function f1(){
            // 1.let声明的变量名不能重复
            let name = "admin";
            // let name = "alice"; // 报错

            // 2.let存在作用域
            for(let i = 0; i < 10; i++){

            }
            console.log(i); // 报错 i is not defined

            // 3.let不存在变量提升
            console.log(a); // 报错 i is not defined
            let a = 10;
        }
        function f2(){
            // 1.var声明的变量名可以重复
            var name = "admin";
            console.log(name);
            var name = "alice";
            console.log(name);

            // 2.var不存在作用域
            for(var i = 0; i < 10; i++){

            }
            console.log(i); // 成功执行,打印10

            // 3.var存在变量提升
                // 变量提升:表示将变量的声明提升到最先的位置
            console.log(a); // 成功执行,返回undefined
            var a = 10;

            // 存在变量提升,提升后相当于下面代码
            var a;
            console.log(a);
            a = 10;
        }
    </script>
</head>
<body>
<button onclick="f1()">let用法</button><br>
<button onclick="f2()">var用法</button><br>
</body>
</html>